<template>
  <div class="app-container">

    <!--tabs-->
    <el-tabs v-model="activeTabName" type="border-card" @tab-click="onTabClick">
      <el-tab-pane label="项目配置" name="projectConfig">
        <dp-server-config :project-id.sync="projectId" />
      </el-tab-pane>
      <el-tab-pane label="部署历史" name="projectDeployList">
        <dp-server-deploy-list :project-id.sync="projectId" />
      </el-tab-pane>
      <el-tab-pane v-if="runningStatus!==RUNNING_STATUS_UNKNOWN" label="资源统计" name="metricsAnalysis">
        <dp-server-metrics-analysis :project-id.sync="projectId" />
      </el-tab-pane>
      <el-tab-pane v-if="runningStatus!==RUNNING_STATUS_UNKNOWN" label="运行时" name="dpServerRunningStatus">
        <dp-server-running-status :project-id.sync="projectId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DpServerConfig from './components/DpServerConfig'
import DpServerDeployList from './components/DpServerDeployList'
import DpServerMetricsAnalysis from './components/DpServerMetricsAnalysis'
import DpServerRunningStatus from './components/DpServerRunningStatus'
import * as APIS from '@/api/server/index'
import { mapGetters } from 'vuex'
import global_const from '@/mixins/global_const'

export default {
  name: 'DpServerDetail',
  components: {
    DpServerConfig,
    DpServerDeployList,
    DpServerMetricsAnalysis,
    DpServerRunningStatus
  },
  mixins: [global_const],
  data() {
    return {
      activeTabName: '',
      projectId: -1,

      runningStatus: this.RUNNING_STATUS_UNKNOWN
    }
  },
  computed: {
    ...mapGetters([
      'env'
    ])
  },
  watch: {
  },
  created() {
    const query = this.$route.query
    if (query === undefined || query.projectId === undefined) {
      this.$notify({
        title: 'url中必须带上projectId参数',
        type: 'error',
        duration: 2500
      })
      return
    }
    this.projectId = parseInt(query.projectId)
  },
  mounted() {
    this.getProjectRunningStatus()
  },
  methods: {
    onTabClick(tab) {
      if (this.activeTabName === 'metricsAnalysis') {
        // 触发resize
        this.$nextTick(() => {
          window.dispatchEvent(new Event('resize'))
        })
      }
    },
    getProjectRunningStatus() {
      APIS.queryProjectRunningStatus({
        projectId: this.projectId,
        env: this.env
      }).then(data => {
        this.runningStatus = data

        if (data === this.RUNNING_STATUS_UNKNOWN) {
          this.activeTabName = 'projectConfig'
        } else {
          this.activeTabName = 'dpServerRunningStatus'
        }
      }).finally(() => {
      })
    }
  }
}
</script>

<style scoped>

  ::v-deep .el-tabs__content {
    padding: 2px 2px !important;
  }
</style>
